const path = require("path");
const { DefinePlugin } = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const ESLintPlugin = require("eslint-webpack-plugin");

module.exports = {
  // 入口文件
  entry: "./src/main.js",
  // 打包出口
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      // 处理 .js 文件
      // 使用 preset-env
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [["@babel/preset-env"]],
            },
          },
        ],
      },
      // 处理 .vue 文件
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      // 处理 .css 文件
      //postcss-loader -> css-loader -> style-loader
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          "style-loader",
          { loader: "css-loader", options: { importLoaders: 1 } },
          {
            loader: "postcss-loader",
            options: {
              plugins: function() {
                return [require("postcss-import")(), require("autoprefixer")()];
              },
            },
          },
        ],
      },
      // 处理 .less 文件
      // less-loader -> postcss-loader -> css-loader -> style-loader
      {
        test: /\.less$/,
        exclude: /node_modules/,
        use: [
          "style-loader",
          { loader: "css-loader", options: { importLoaders: 1 } },
          {
            loader: "postcss-loader",
            options: {
              plugins: function() {
                return [require("postcss-import")(), require("autoprefixer")()];
              },
            },
          },
          { loader: "less-loader" },
        ],
      },
      // 超过 10k 文件存储，否则转换为 base64
      {
        test: /\.png|jpe?g|gif|svg|ico|woff|woff2|eot|ttf|oft$/,
        exclude: /node_modules/,
        use: {
          loader: "url-loader",
          options: {
            limit: 10 * 1024,
            esModule: false,
          },
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: "vue-app-base",
      filename: "index.html",
      template: "./public/index.html",
    }),
    new DefinePlugin({
      BASE_URL: "/public/",
    }),
    new ESLintPlugin(),
  ],
};
